<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <meta name="description" content="描述">
    <meta name="keywords" content="关键词">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">
    <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
    <title>商务合作</title>
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <link href="/web/lib/cropper/cropper.min.css" rel="stylesheet">
    <link href="/web/lib/cropper/sitelogo.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <style type="text/less">
        @import "/web/public/public.less";

        .container {
            width: 100% !important;
            padding: 80px 0 0 0 !important;

            .banner{
                position: relative;

                .banner-img{
                    width: 100%;
                    height: 166px;
                }
                .text{
                    width: 204px;
                    height: 77px;
                    position: absolute;
                    left: 50%;
                    margin-left: -102px;
                    top: 50%;
                    margin-top: -38px;
                }
            }

            #main {
                .clearfix;
                width: 1024px;
                margin: 0 auto;
                position: relative;
                padding-top: 23px;

                .tab-wrap{
                    font-size: 24px;
                    border-bottom: 1px solid #EEEEEE;

                    .tab-item{
                        display: inline-block;
                        line-height: 60px;
                        border-bottom: 4px solid #6C759C;
                        padding: 0 5px;
                        margin-bottom: -2px;
                    }
                }
                .form-wrap{
                    width: 760px;
                    margin: 60px auto;
                    font-size: 16px;

                    .form-item{
                        .clearfix;
                        margin-top: 30px;
                        .keyword{
                            width: 110px;
                            text-align: right;
                            .fl;
                            line-height: 50px;
                        }
                        .value{
                            .fl;
                            margin-left: 20px;
                            position: relative;
                            &.must-input{
                                position: relative;
                                &:after{
                                    content: '*';
                                    position: absolute;
                                    right: -15px;
                                    top: 20px;
                                    color: #E60012;
                                }

                                .error-sign{
                                    position: absolute;
                                    bottom: -23px;
                                    left: 20px;
                                    color: #E60012;
                                    font-size: 14px;
                                }
                            }
                            input{
                                width: 600px;
                                height: 50px;
                                border: 1px solid #E0E0E0;
                                border-radius: 8px;
                                padding-left: 20px;
                            }
                            .btn-default{
                                height: 50px;
                            }
                            .dropdown-menu{
                                & li{
                                    a{
                                        line-height: 50px;
                                    }
                                }
                            }
                            .caret{
                                color: #D6D6D6;
                                border-top-width: 6px;
                                border-left-width: 6px;
                                border-right-width: 6px;
                            }

                            .img-wrap{
                                width: 228px;
                                height: 134px;
                                position: relative;
                                border-radius: 8px;
                                overflow: hidden;
                                cursor: pointer;
                                &:hover {
                                    &:before {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        content: '添加名片';
                                        position: absolute;
                                        text-align: center;
                                        line-height: 122px;
                                        background-color: rgba(0, 0, 0, .5);
                                        color: #ffffff;
                                    }
                                }

                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
                .btn.save {
                    display: block;
                    width: 200px;
                    line-height: 60px;
                    color: #ffffff;
                    text-align: center;
                    background-color: #34558A;
                    border-radius: 8px;
                    margin: 50px auto 0;
                    cursor: pointer;
                    padding: 0;
                    font-size: 24px;
                }
            }
        }
    </style>

    <script src="/web/lib/less.min.js"></script>
    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="/web/lib/jquery.pagination.js"></script>
    <script src="/web/lib/cropper/cropper.js"></script>
    <script src="/web/lib/cropper/sitelogo.js"></script>
</head>
<body>
<div class="container">
    <!--这里引入header-->
    <!--#include virtual="/web/html/header/header.htm"-->
    <div class="banner">
        <img class="banner-img" src="/web/img/img-about.png" alt="">
        <img class="text" src="/web/img/text-cooperation.png" alt="">
    </div>
    <div id="main">
        <div class="tab-wrap">
            <div class="tab-item">供应商信息</div>
        </div>
        <div class="form-wrap">
            <div class="form-item supplier">
                <div class="keyword">供应商名称：</div>
                <div class="value must-input">
                    <input type="text" placeholder="请输入供应商名称" data-error-sign="供应商名称应为1-200字">
                </div>
            </div>
            <div class="form-item industry">
                <div class="keyword">所属行业：</div>
                <div class="value must-input">
                    <select class="selectpicker" data-error-sign="请选择所属行业">
                    </select>
                </div>
            </div>
            <div class="form-item intention">
                <div class="keyword">合作意向：</div>
                <div class="value must-input">
                    <input type="text" placeholder="请填写" data-error-sign="合作意向应为1-200字">
                </div>
            </div>
            <div class="form-item contact">
                <div class="keyword">联系人：</div>
                <div class="value must-input">
                    <input type="text" placeholder="联系人" data-error-sign="联系人应为1-200字">
                </div>
            </div>
            <div class="form-item mobile">
                <div class="keyword">手机/微信：</div>
                <div class="value must-input">
                    <input type="text" placeholder="手机/微信" data-error-sign="手机或微信应为1-200字">
                </div>
            </div>
            <div class="form-item worker">
                <div class="keyword">职位：</div>
                <div class="value">
                    <input type="text" placeholder="职位" data-error-sign="职位应为1-200字">
                </div>
            </div>
            <div class="form-item picture">
                <div class="keyword">提交人名片：</div>
                <div class="value">
                    <input type="file" style="display: none;">
                    <div class="img-wrap">
                        <img src="/web/img/default-card.jpg" alt="图片">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn save">提交</div>
    </div>
    <!--#include file="/web/html/footer/footer.htm"-->
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
         tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <form class="avatar-form">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                <button class="btn btn-danger" type="button" style="height: 35px;"
                                        onclick="$('input[id=avatarInput]').click();">请选择图片
                                </button>
                                <span id="avatar-name"></span>
                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg" id="imageHead"></div>

                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-4">
                                    <div class="btn-group">
                                        <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90"
                                                type="button" title="Rotate -90 degrees"> 向左旋转
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn  btn-danger fa fa-repeat" data-method="rotate"
                                                data-option="90"
                                                type="button" title="Rotate 90 degrees"> 向右旋转
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-5" style="text-align: right;">
                                    <button class="btn btn-danger fa fa-arrows" data-method="setDragMode"
                                            data-option="move"
                                            type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title=""
      data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom"
                                            data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">

</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
                                            data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">

</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset"
                                            title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)"
      aria-describedby="tooltip866214"></span>
                                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button"
                                            data-dismiss="modal"> 保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/web/lib/cropper/html2canvas.min.js"></script>
<script src="/web/lib/axios.min.js"></script>

<script>

    var $supplierInput = $('.form-item.supplier input'),
        $intentionInput = $('.form-item.intention input'),
        $contactInput = $('.form-item.contact input'),
        $mobileInput = $('.form-item.mobile input'),
        $industrySelect = $('.form-item.industry select'),
        $workerInput = $('.form-item.worker input'),
        $selectImgBtn = $('.form-item.picture .img-wrap'),
        $selectImgInput = $selectImgBtn.prev("input[type=file]"),
        imgCardUrl = '';

    $(function () {

        $selectImgBtn.click(function () {
            $selectImgInput.click();
        });
        $selectImgInput.change(function (e) {
            var file = this;
            var filemaxsize = 1024 * 5;//5M
            var target = $(e.target);
            var Size = target[0].files[0].size / 1024;
            if (!file.files[0].type.match(/image.*/)) {
                utils.showToast({
                    title: '请选择正确的图片格式',
                    type: 'warning'
                });
                return false;
            }
            if (Size > filemaxsize) {
                utils.showToast({
                    title: '图片过大，请重新选择',
                    type: 'warning'
                });
                return false;
            }
            var reader = new FileReader();
            if (file) {
                reader.readAsDataURL(file.files[0])
            }
            // 捕获 转换完毕
            reader.onload = function(e) {
                // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
                $('.form-item.picture .img-wrap img').prop('src',e.target.result);
                imagesAjax(e.target.result);
            }
        });

        function showErrorSign(el){
            if(!el.next('.error-sign').length){
                el.after('<span class="error-sign">'+ el.data('errorSign') +'</span>');
            }
        }
        function hideErrorSign(el){
            el.next('.error-sign').remove();
        }
        function testValEmpty(el,str){
            var val = str||el.val().trim();
            if (!val||val.length>200) {
                showErrorSign(el);
            } else {
                hideErrorSign(el);
            }
            return Boolean(val);
        }

        $.ajax({
            url: ports.getIndustryList,
            success: function (res) {
                console.log('查询行业列表', res);
                $.each(res.data,function (i,item) {
                    $('.industry .selectpicker').append('<option value='+ item.constantName +'>'+ item.constantName +'</option>');
                });
                $('.selectpicker').selectpicker({});
            }
        })
        $supplierInput.change(function () {
            testValEmpty($(this))
        });
        $intentionInput.change(function () {
            testValEmpty($(this))
        });
        $contactInput.change(function () {
            testValEmpty($(this))
        });
        $mobileInput.change(function () {
            testValEmpty($(this))
        });
        $workerInput.change(function () {
            var val = $(this).val().trim();
            if (val.length>200) {
                showErrorSign($(this));
            } else {
                hideErrorSign($(this));
            }
        });

        $('.btn.save').click(function () {
            var pass = true;
            if(!testValEmpty($supplierInput)){
                pass = false;
            }
            if(!testValEmpty($intentionInput)){
                pass = false;
            }
            if(!testValEmpty($contactInput)){
                pass = false;
            }
            if(!testValEmpty($mobileInput)){
                pass = false;
            }
            if($workerInput.val().trim().length>200){
                pass = false;
                showErrorSign($workerInput);
            }

            if (pass) {
                $.ajax({
                    url: ports.commitCooperation,
                    data: {
                        "supplierName": $supplierInput.val().trim(),
                        "industry": $industrySelect.val().trim(),
                        "linkman": $contactInput.val().trim(),
                        "position": $workerInput.val().trim(),
                        "contactWay": $mobileInput.val().trim(),
                        "intention":$intentionInput.val().trim(),
                        picUrl:imgCardUrl
                    },
                    success: function (res) {
                        console.log('提交商务合作信息', res);
                        if(res.status==200){
                            utils.showToast({
                                title:'提交成功',
                                type:'success'
                            })
                            window.location.href = '/';
                        }
                    }
                })
            }
        })
    })
</script>
<script>
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function (e) {
        var filemaxsize = 1024 * 5;//5M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if (Size > filemaxsize) {
            alert('图片过大，请重新选择!');
            $(".avatar-wrapper").children().remove;
            return false;
        }
        if (!this.files[0].type.match(/image.*/)) {
            alert('请选择正确的图片!')
        } else {
            var filename = document.querySelector("#avatar-name");
            var texts = document.querySelector("#avatarInput").value;
            var teststr = texts; //你这里的路径写错了
            testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
            filename.innerHTML = testend;

            if(!$(".avatar-wrapper img.cropper-hidden").length){
                var timer = setInterval(function () {
                    if($(".avatar-wrapper img.cropper-hidden").length){
                        clearInterval(timer);
                        $(".avatar-wrapper img").cropper('destroy').cropper({aspectRatio: 228/134, preview: '#imageHead', strict: false,});
                    }
                },1)
            }

        }

    });

    $(".avatar-save").on("click", function () {
        var img_lg = document.getElementById('imageHead');
        // 截图小的显示框内的内容
        html2canvas(img_lg, {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //生成base64图片数据
                var dataUrl = canvas.toDataURL("image/jpeg");
                $("*[data-target='#avatar-modal'] img").prop('src', dataUrl);
                imagesAjax(dataUrl)
            }
        });
    })

    function imagesAjax(src) {
        axios({
            method:'post',
            url:ports.uploadCooperationPicture,
            data:utils.base64ToFormData(src),
            contentType:'multipart/form-data',
            responseType:'json',
            headers: {
                'Authorization': utils.cookieUtils.getCookie("token")
            }
        }).then(function(res) {
            console.log('上传图片', res);
            imgCardUrl = res.data.data;
        });
    }
</script>
</body>
</html>
